<template>
	<div id="css">
		<!-- <button 
		v-for="tag in tags"
		v-bind:key="tag.name"
		v-bind:calss="['tag-button',{active:currenttag.name===tag.name}]"
		@click="currenttag=tag"
		>{{tag.name}}</button>
		<component v-bind:is="currenttag.component" calss="tag"></component> -->
		<Tabs value="name1">
			<TabPane label="标签一" name="name1">
				<componentf v-bind:data="pricedata" v-bind:options="options"></componentf>
			</TabPane>
			<TabPane label="标签二" name="name2">
				<chart v-bind:dataset="thedata" title="测试1" />
			</TabPane>
			<TabPane label="标签三" name="name3">
				<pie v-bind:value="valuepie" title="测试2"></pie>
			</TabPane>
		</Tabs>
	</div>

</template>

<script>
	import barcharts from '../chart/bar.vue'
	import piecharts from '../chart/pie.vue'
	var componentA = {
		props: {
			options: {
				type: Array
			}
		},
		data: function() {
			return {
				column1: [{
						type: 'index',
						width: '60',
						align: "center"
					},
					{
						title: "价格",
						key: "price"
					}
				],
				thelist: [],
				defaultname: "egg",
				loading1: false,

			}
		},
		mounted: function() {
			var url = "/api/price"
			this.axios({
					method: "post",
					url: url,
					data: {
						name: this.defaultname
					}
				}).then(r => {
					// this.$Message.info(r)
					// console.log(r.data)
					this.thelist = r.data
				})
				.catch(error => {
					this.$Message.info("error" + error)
				})
		},

		methods: {
			// fetchall(query){
			// 	if (query !== '') {
			// 		this.loading1 = true;
			// 		setTimeout(() => {
			// 			this.loading1 = false;
			// 			this.thelist = this.options.filter(item => item.label.indexOf(query) > -1);
			// 		}, 2000);
			// 	} else {
			// 		this.options3 = [];
			// 	}
			// }
			onchange: function(value) {
				var url = "/api/price"
				this.axios({
						method: "post",
						url: url,
						data: {
							name: value
						}
					}).then(r => {
						// this.$Message.info(r)
						// console.log(r.data)
						this.thelist = r.data
					})
					.catch(error => {
						this.$Message.info("error" + error)
					})
			}
		},
		template: `
		<div>
			<Select v-model="defaultname" style="width:200px" @on-change="onchange">
				<Option v-for="item in options" :value="item.value" :key="item.value" >{{ item.label }}</Option>
			</Select>
			<Table border stripe :columns="column1" :data="thelist"></Table>
		</div>
		`
	}
	export default {
		data: function() {
			// var tags=[
			// 		{
			// 			name:"kitty",
			// 			component:componentA
			// 			},
			// 		{
			// 			name:"Jerry",
			// 			component:{
			// 				template:`<p>I am Jerry</p>`
			// 			}

			// 			},
			// 		{
			// 			name:"hong",
			// 			component:{
			// 				template:`<p>I am xiaohong</p>`
			// 			}

			// 			}
			// 	];
			return {
				pricedata: [{
						price: 2
					},
					{
						price: 6
					},
					{
						price: 4
					}
				],

				options: [{
						value: "egg",
						label: "鸡蛋"
					},
					{
						value: "pig",
						label: "猪肉"
					},
					{
						value: "cabbage",
						label: "白菜"
					}
				],
				thedata: [
					['x', 'y'],
					['2015', 25],
					['2016', 28],
					['2017', 30],
					['2018', 35]
				],
				valuepie: [{
						value: 40,
						name: 'rose 1'
					},
					{
						value: 38,
						name: 'rose 2'
					},
					{
						value: 32,
						name: 'rose 3'
					},
					{
						value: 30,
						name: 'rose 4'
					},
					{
						value: 28,
						name: 'rose 5'
					},
					{
						value: 26,
						name: 'rose 6'
					},
					{
						value: 22,
						name: 'rose 7'
					},
					{
						value: 18,
						name: 'rose 8'
					}
				],
				// tags:tags,
				// currenttag:tags[0]
			}
		},
		components: {
			componentf: componentA,
			chart: barcharts,
			pie: piecharts
		}
	}
</script>

<style>
</style>
